import React, { useEffect, useState } from 'react';
import {
  Form,
  message,
  Modal,
  Input,
  Select,
  Button,
  SelectProps
}
  from 'antd';
import { addTakeAwayIntegeralSetting, getTakeAwayIntegeralSettingById, updateTakeAwayIntegeralSetting } from '@/services/takeAwayIntegeralSettingService';
import { getTakeAwayShopAll } from '@/services/takeAwayShopService';

interface Props {
  modalVisible: boolean;
  onSubmit: () => void;
  onCancel: () => void;
  id?: number;
}

let shopOptions: SelectProps['options'] = [];
const CreateModal: React.FC<Props> = (props) => {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const { modalVisible, onSubmit, onCancel, id } = props;
  const [form] = Form.useForm();

  const saveRecord = async () => {
    form.validateFields().then(async () => {
      const { StatusCode } = id ? await updateTakeAwayIntegeralSetting({ ...form.getFieldsValue(), Id: id }) : await addTakeAwayIntegeralSetting({ ...form.getFieldsValue(), AddTime: new Date() });
      if ((id && StatusCode == 0) || (!id && StatusCode == 201)) {
        message.success("保存成功！");
        onSubmit?.();
        form.resetFields();
      }
    }).catch(err => console.log(err));
  }

  const getShopList = async () => {
    const { Items } = await getTakeAwayShopAll();
    shopOptions = Items.map((r: any) => {
      return {
        label: r.Name,
        value: r.Id
      }
    });
  }

  const getDetail = async () => {
    if (!id) {
      await getShopList();
      return;
    }

    await getShopList();
    const { Items } = await getTakeAwayIntegeralSettingById(id, {});
    form.setFieldValue("Integeral", Items[0].Integeral);
    form.setFieldValue("Money", Items[0].Money);
    form.setFieldValue("ShopId", Items[0].ShopId);
    setIsLoading(true);
  }

  const handleChange = (value: string[]) => {
    console.log(`selected ${value}`);
  };

  useEffect(() => {
    form.resetFields();
    setIsLoading(false);
    getDetail();
  }, [id]);

  return (
    <Modal
      width={700}
      destroyOnClose
      title={id ? "新建" : "修改"}
      open={modalVisible}
      onCancel={() => onCancel()}
      footer={[
        <Button key="submit" onClick={() => { saveRecord() }} type="primary">
          保存
        </Button>,
        <Button key="back" onClick={() => { onCancel() }} >
          取消
        </Button>,
      ]}
    >
      <Form
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        style={{ maxWidth: 600 }}
        form={form}
        initialValues={{ remember: true }}
        autoComplete="off"
      >
        <Form.Item label='店铺' name='ShopId'  >
          {isLoading ? <Select
            allowClear
            style={{ width: '100%' }}
            placeholder="Please select"
            onChange={handleChange}
            options={shopOptions}
          /> : <Select
            allowClear
            style={{ width: '100%' }}
            placeholder="Please select"
            onChange={handleChange} />
          }
        </Form.Item>
        <Form.Item label='金额' name='Money'  ><Input /></Form.Item>
        <Form.Item label='积分' name='Integeral'  ><Input /></Form.Item>

      </Form>
    </Modal>
  );
}

export default CreateModal;
